<template lang="html">
  <div class="sec_nav" id="sec_list">
    <ul class="clearfix">
      <!-- <router-link tag="li" class="fl" v-for="item in navList" :class="">{{item.title}}</router-link> -->
      <li class="fl tac nav_list" v-for="item in navList" >
        <div class="in_list_con" :class="item.class">
          {{item.title}}
        </div>
      </li>
    </ul>
    <listcon :listcon="listcon"></listcon>
  </div>
</template>

<script>
export default {

  data(){
    return{
      navList:[
        {
          title:"饼干",
          class:'listbg1'
        },
        {
          title:"巧克力",
          class:'listbg2'
        },
        {
          title:"牛奶",
          class:'listbg3'
        },
        {
          title:"水果",
          class:'listbg4'
        },
        {
          title:"糖",
          class:'redBack'
        },
        {
          title:"特产",
          class:'redBack'
        },
        {
          title:"饼干",
          class:'redBack'
        }
      ],
      listcon:[
        {
          title:'测试'
        },
        {
          title:'测试2'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
@mixin border-radius($px){
  border-radius:$px;
  -webkit-border-radius:$px;
}
.listbg1.in_list_con{background: #f66b64 !important;}
.listbg2.in_list_con{background: #fab384 !important;}
.listbg3.in_list_con{background: #8f29ee !important;}
.listbg4.in_list_con{background: #36d18b !important;}
.listbg5.in_list_con{background: #7be3e3 !important;}
.listbg6.in_list_con{background: #fcc214 !important;}
.listbg7.in_list_con{background: #f1605a !important;}
#sec_list{
  width: 100%;
  height: 100%;
  overflow-x: auto;

    li.nav_list{
      width: 20%;
      color: #fff;
      font-size: 0.22rem;
      margin-bottom: 0.14rem;
      .in_list_con{
        width: 0.86rem;
        height: 0.86rem;
        line-height: 0.86rem;
        display: inline-block;
        @include border-radius (50%);
        background: #f66b64;
      }
    }
}
</style>
